/**
*@description 用户列表
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import styles from './TableList.less';
import { Table, Icon, Pagination } from 'antd';

const columns = [{
  title: 'UID',
  dataIndex: 'uid',
  //sorter: true,
  render: (text)=>(<div title={text} style={{width:"150px", whiteSpace:"nowrap",textOverflow:"ellipsis", "overflow":"hidden"}}>{text}</div>),
  width: '150px',
}, {
  title: '昵称',
  dataIndex: 'nick_name'
},{
  title:'查看',
  render: (text, record) => (
    <span>
      <Link to={{pathname:"/UserView", query:{uid:escape(`${record.uid}`), openid:escape(`${record.openid}`),appid:escape(`${record.appid}`)}}}><Icon type="eye-o" /></Link>
    </span>
  )
}];

class TableList extends Component {
    constructor(props) {
      super(props);
    }
      // 获取数据
    fetchData(type, search){
      this.props.dispatch({
              type: type,
              payload: search
      })
    };
    componentWillMount() {
        let params = "";
        if(this.props.groupInfo){
            params="pageSize="+this.props.pageSize+"&pageNum=1"+"&channelType="+(this.props.TableList.channelType || 'a')+"&condition="+(this.props.groupInfo=="true"?(this.props.TableList.condition || '{"ival1":[],"ival2":[],"ival3":[],"ival4":[],"ival5":[],"ival6":[]}'):this.props.groupInfo);
        }else{
            params="pageSize="+this.props.pageSize+"&page=1&pageNum=1";
        }
        this.fetchData("TableList/"+(this.props.groupInfo?'userListByGroup': (window.localStorage.getItem("userListByGroupID")?'userListByGID':'userList')), params);
   };

    handleTableChange = (page) => {
        let pg = 'pageNum='+page+'&page='+page+"&pageSize="+this.props.pageSize+"&condition="+this.props.TableList.condition+"&channelType="+this.props.TableList.channelType;
        this.fetchData("TableList/"+(this.props.groupInfo?'userListByGroup':(window.localStorage.getItem("userListByGroupID")?'userListByGID':'userList')), pg);
    };

    footer = (currentPageData)=>{
        return (<div><span style={{display:"block",marginBottom:10, marginLeft:10}}>共{parseInt(this.props.TableList.pagination.total).formatMoney()}人</span>&nbsp;<Pagination
        className="ant-table-pagination"
        total={this.props.TableList.pagination.total/this.props.pageSize>500?500*this.props.pageSize:this.props.TableList.pagination.total}
        current={this.props.TableList.pagination.current}
        pageSize={this.props.pageSize}
        onChange={this.handleTableChange.bind(this)}
      /></div>);
    };

    render(){
      return (
        <div className={styles.container}>
          <div className={styles.topinfo}>用户列表</div>
          <Table columns={columns}
              rowKey={record => record.uid}
              dataSource={this.props.TableList.dataList} 
              pagination={false}
              footer={this.footer.bind(this)} 
              loading={this.props.TableList.loading}
              onChange={this.handleTableChange.bind(this)}
            />
        </div>
      );
  }
};

TableList.propTypes = {
  pageSize:PropTypes.number,
  headerInfo:PropTypes.string,
  groupInfo:PropTypes.string
};

function mapStateToProps({ TableList }) {
  return {
    TableList: {...TableList},
  };
}

export default connect(mapStateToProps)(TableList);